<template>
	<!-- 我的优惠券 -->
	<view class="my-coupon-wrapper">
		<view class="h-tabs">
			<!-- 我的优惠券状态(优惠券状态 0:失效 1:有效 2:使用过) -->
			<view :class="'h-tab ' + (type==1?'on':'')" data-type="1" @tap="changeTab">{{i18n.unused}}({{unUseCount}})
			</view>
			<view :class="'h-tab ' + (type==2?'on':'')" data-type="2" @tap="changeTab">
				{{i18n.usageRecord}}({{useCount}})
			</view>
			<view :class="'h-tab ' + (type==0?'on':'')" data-type="0" @tap="changeTab">
				{{i18n.expired}}({{expiredCount}})
			</view>
		</view>
		<view class="coupons">
			<block v-for="(item, id) in couponList" :key="id">
				<coupon @longtap="delCouponHandle" :data-couponid="item.couponId" :canUse="type == 1" :couponItem="item"
					:type="type" :myCoupon="true"></coupon>
			</block>
		</view>

		<!-- <view class="empty" wx:if="{{!couponList.length}}">这里还没有任何东西~</view> -->
		<!-- 空 -->
		<view class="empty" v-if="!couponList.length">
			<view class="empty-icon">
				<image src="/static/images/icon/empty.png"></image>
			</view>
			<view class="empty-text">{{i18n.couponTips}}</view>
		</view>

	</view>
</template>

<script>
	// pages/myCoupon/myCoupon.js
	var http = require("../../../utils/http.js");
	import coupon from "../../../components/coupon/coupon";

	export default {
		data() {
			return {
				type: 1,
				couponList: [],
				unUseCount: 0,
				useCount: 0,
				expiredCount: 0,
				pages: 0,
				current: 1,
				size: 20
			};
		},

		components: {
			coupon
		},
		props: {},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.couponCount();
			this.loadMyCouponData(this.type);
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			uni.setNavigationBarTitle({
				title: this.i18n.myDiscountCoupon
			});
		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			if (this.current < this.pages) {
				this.loadOrderData(this.sts, this.current + 1);
			}
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (this.current < this.pages) {
				this.setData({
					current: this.current + 1
				});
				this.loadMyCouponData(this.type);
			}
		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			/**
			 * 获取我的优惠券列表
			 */
			loadMyCouponData(type) {
				uni.showLoading()
				// 我的优惠券状态(status优惠券状态 0:失效 1:有效 2:使用过)
				var params = {
					url: "/p/myCoupon/getCouponList",
					method: "GET",
					data: {
						status: type,
						current: this.current,
						size: this.size
					},
					callBack: res => {
						uni.hideLoading()
						let list = [];
						if (res.current == 1) {
							list = res.records;
						} else {
							list = this.couponList.concat(res.records);
						}
						this.setData({
							couponList: list,
							pages: res.pages
						});
					}
				};
				http.request(params);
			},

			/**
			 *  标签切换事件
			 */
			changeTab(e) {
				this.setData({
					current: 1,
					type: e.currentTarget.dataset.type,
					couponList: []
				});
				this.loadMyCouponData(this.type);
			},

			/**
			 *  获取各个状态下优惠券数量
			 */
			couponCount() {
				var ths = this;
				var params = {
					url: "/p/myCoupon/getMyCouponsStatusCount",
					method: "GET",
					data: {},
					callBack: function(res) {
						ths.setData({
							unUseCount: res.unUseCount,
							expiredCount: res.expiredCount,
							useCount: res.useCount
						});
					}
				};
				http.request(params);
			},

			/**
			 * 删除优惠券
			 */
			delCouponHandle(e) {
				let couponId = e.currentTarget.dataset.couponid;
				let ths = this;
				uni.showModal({
					title: '',
					content: ths.i18n.deleteCouponTips,
					cancelText: ths.i18n.cancel,
					confirmText: ths.i18n.confirm,
					confirmColor: "#eb2444",

					success(res) {
						if (res.confirm) {
							uni.showLoading();
							let params = {
								url: "/p/myCoupon/deleteCoupon/" + couponId,
								method: "DELETE",
								data: {},
								callBack: function(res) {
									ths.loadMyCouponData(ths.type);
									uni.hideLoading()
								}
							};
							http.request(params);
						} else if (res.cancel) {}
					}

				});
			}

		}
	};
</script>
<style lang="scss">
	.my-coupon-wrapper {
		.h-tabs {
			border-bottom: 1px solid #f2f2f2;
			display: flex;
			justify-content: space-around;
			font-size: 14px;
			position: fixed;
			top: 0;
			z-index: 1000;
			width: 100%;
			background: #fff;


			.h-tab {
				height: 88rpx;
				line-height: 88rpx;

				&.on {
					border-bottom: 3px solid #eb2444;
					font-weight: bold;
				}
			}
		}

		.coupons {
			margin-top: 68rpx;
			padding: 20rpx;
		}

		/* 列表为空 */
		.empty {
			margin-top: 200rpx;
			text-align: cneter;


			.empty-icon {
				display: block;
				width: 80rpx;
				height: 80rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;
			}

			.empty-icon>image {
				width: 100%;
				height: 100%;
			}

			.empty-text {
				font-size: 28rpx;
				text-align: center;
				color: #999;
				line-height: 2em;
			}
		}
	}
</style>
